<template>
  <div class="carousel-container" ref="carouselRef">
    <!-- 轮播图主体 -->
    <div class="carousel-wrapper" :style="{ height: height }">
      <div 
        class="carousel-content" 
        :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
        @mouseenter="pauseAutoPlay"
        @mouseleave="startAutoPlay"
      >
        <div 
          v-for="(item, index) in carouselItems" 
          :key="index"
          class="carousel-item"
          :style="{ backgroundImage: `url(${item.image})` }"
        >
          <div class="carousel-caption" v-if="item.title || item.description">
            <h3 v-if="item.title" class="carousel-title">{{ item.title }}</h3>
            <p v-if="item.description" class="carousel-description">{{ item.description }}</p>
          </div>
        </div>
      </div>

      <!-- 前后切换按钮 -->
      <div v-if="showArrows" class="carousel-arrows">
        <button 
          class="carousel-arrow carousel-arrow-left"
          @click="prev"
          :disabled="!loop && currentIndex === 0"
        >
          <svg-icon icon-class="arrow-left" />
        </button>
        <button 
          class="carousel-arrow carousel-arrow-right"
          @click="next"
          :disabled="!loop && currentIndex === carouselItems.length - 1"
        >
          <svg-icon icon-class="arrow-right" />
        </button>
      </div>

      <!-- 指示器 -->
      <div v-if="showIndicators" class="carousel-indicators">
        <button
          v-for="(item, index) in carouselItems"
          :key="index"
          class="carousel-indicator"
          :class="{ active: index === currentIndex }"
          @click="goTo(index)"
        ></button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'

// 定义组件属性
const props = defineProps({
  // 轮播图数据
  items: {
    type: Array,
    default: () => []
  },
  // 轮播图高度
  height: {
    type: String,
    default: '400px'
  },
  // 自动播放间隔时间（毫秒）
  interval: {
    type: Number,
    default: 3000
  },
  // 是否自动播放
  autoplay: {
    type: Boolean,
    default: true
  },
  // 是否循环播放
  loop: {
    type: Boolean,
    default: true
  },
  // 是否显示箭头
  showArrows: {
    type: Boolean,
    default: true
  },
  // 是否显示指示器
  showIndicators: {
    type: Boolean,
    default: true
  },
  // 切换动画时长（毫秒）
  duration: {
    type: Number,
    default: 300
  }
})

// 定义事件
const emit = defineEmits(['change', 'click'])

// 响应式数据
const currentIndex = ref(0)
const timer = ref(null)
const carouselRef = ref(null)

// 计算属性
const carouselItems = computed(() => {
  return props.items.map(item => {
    if (typeof item === 'string') {
      return { image: item }
    }
    return item
  })
})

// 方法
const next = () => {
  if (currentIndex.value < carouselItems.value.length - 1) {
    currentIndex.value++
  } else if (props.loop) {
    currentIndex.value = 0
  }
  emit('change', currentIndex.value)
}

const prev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
  } else if (props.loop) {
    currentIndex.value = carouselItems.value.length - 1
  }
  emit('change', currentIndex.value)
}

const goTo = (index) => {
  if (index >= 0 && index < carouselItems.value.length) {
    currentIndex.value = index
    emit('change', currentIndex.value)
  }
}

const startAutoPlay = () => {
  if (!props.autoplay || carouselItems.value.length <= 1) return
  
  stopAutoPlay()
  timer.value = setInterval(() => {
    next()
  }, props.interval)
}

const stopAutoPlay = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}

const pauseAutoPlay = () => {
  if (props.autoplay) {
    stopAutoPlay()
  }
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    if (props.autoplay) {
      startAutoPlay()
    }
  })
})

onUnmounted(() => {
  stopAutoPlay()
})

// 监听器
watch(() => props.autoplay, (newVal) => {
  if (newVal) {
    startAutoPlay()
  } else {
    stopAutoPlay()
  }
})

watch(() => props.interval, () => {
  if (props.autoplay) {
    startAutoPlay()
  }
})

// 暴露方法给父组件
defineExpose({
  next,
  prev,
  goTo,
  startAutoPlay,
  stopAutoPlay
})
</script>

<style lang="scss" scoped>
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-content {
  display: flex;
  transition: transform v-bind(duration + 'ms') ease-in-out;
  height: 100%;
}

.carousel-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 40px 20px 20px;
  text-align: center;
}

.carousel-title {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-description {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  &:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .svg-icon {
    width: 20px;
    height: 20px;
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
  }

  &.active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .carousel-arrow {
    width: 36px;
    height: 36px;

    .svg-icon {
      width: 16px;
      height: 16px;
    }
  }

  .carousel-caption {
    padding: 30px 15px 15px;
  }

  .carousel-title {
    font-size: 20px;
  }

  .carousel-description {
    font-size: 14px;
  }

  .carousel-indicators {
    bottom: 15px;
  }

  .carousel-indicator {
    width: 10px;
    height: 10px;
  }
}
</style> 